import { View, Text, StyleSheet, TextInput, TouchableOpacity, FlatList, SafeAreaView } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../../navigation/types';
import { useState } from 'react';

const SearchScreen = () => {
    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
    const [inputText, setInputText] = useState('');
    const hotSearches = [
        '大学英语综合教程2', '大学英语视听说教程2', 
        '大学英语综合教程4', '高等数学', '线性代数',
        '概率论与数理统计', '大学物理', '大学英语',
        '有机化学', '视听说教程2'
    ];
    
    const searchHistory = [
        '英语', '数学', '有机化学'
    ];
    
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.header}>
                <TouchableOpacity onPress={() => navigation.goBack()}>
                    <Text style={styles.backButton}>{'<'}</Text>
                </TouchableOpacity>
                <View style={styles.searchBar}>
                    <TextInput
                        value={inputText}
                        style={styles.input}
                        placeholder="请输入搜索内容"
                        onChangeText={(text) => setInputText(text)}
                    />
                </View>
                <TouchableOpacity onPress={() =>{ 
                    if(inputText === ''){
                        alert('请输入搜索内容');
                        return;
                    }
                    navigation.navigate('Searcher')}}>
                    <Text style={styles.searchButton}>搜索</Text>
                </TouchableOpacity>
            </View>
            
            <View style={styles.hotSearchSection}>
                <View style={styles.sectionHeader}>
                    <Text style={styles.sectionTitle}>热门搜索</Text>
                    <TouchableOpacity>
                        <Text style={styles.refreshIcon}>⟳</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.tagContainer}>
                    {hotSearches.map((item, index) => (
                        <TouchableOpacity key={index} style={styles.tag} onPress={() =>setInputText(item) }>
                            <Text>{item}</Text>
                        </TouchableOpacity>
                    ))}
                </View>
            </View>
            
            <View style={styles.historySection}>
                <View style={styles.sectionHeader}>
                    <Text style={styles.sectionTitle}>搜索历史</Text>
                    <TouchableOpacity>
                        <Text style={styles.trashIcon}>🗑</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.tagContainer}>
                    {searchHistory.map((item, index) => (
                        <TouchableOpacity key={index} style={styles.historyTag} onPress={() =>setInputText(item)}>
                            <Text>{item}</Text>
                        </TouchableOpacity>
                    ))}
                </View>
            </View>
        </SafeAreaView>
    )
}

export default SearchScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
        marginTop: 20,
    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 15,
        paddingVertical: 10,
    },
    backButton: {
        fontSize: 24,
        marginRight: 10,
    },
    searchBar: {
        flex: 1,
        backgroundColor: 'white',
        borderRadius: 20,
        paddingHorizontal: 15,
        height: 40,
        justifyContent: 'center',
    },
    input: {
        fontSize: 14,
    },
    searchButton: {
        marginLeft: 15,
        fontSize: 16,
    },
    hotSearchSection: {
        marginTop: 20,
        paddingHorizontal: 15,
    },
    historySection: {
        marginTop: 20,
        paddingHorizontal: 15,
    },
    sectionHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 15,
    },
    sectionTitle: {
        fontSize: 18,
        fontWeight: 'bold',
    },
    refreshIcon: {
        fontSize: 18,
    },
    trashIcon: {
        fontSize: 18,
    },
    tagContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    tag: {
        backgroundColor: 'white',
        paddingHorizontal: 15,
        paddingVertical: 10,
        borderRadius: 5,
        marginRight: 10,
        marginBottom: 10,
    },
    historyTag: {
        backgroundColor: 'white',
        paddingHorizontal: 15,
        paddingVertical: 10,
        borderRadius: 5,
        marginRight: 10,
        marginBottom: 10,
    }
});
